<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/sockjs.js"></script>
    <script src="js/stomp.js"></script>
    <title></title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            min-width: 670px !important;
            background-color: #dce8ed !important;
            font-family: "Microsoft YaHei","Microsoft JhengHei","NSimSun","PMingLiU","DFKai-SB","KaiTi";
        }

        ul {
            list-style: none;
            padding-left: 0;
            height: auto;
        }

        h3 {
            font-weight: bold;
        }

        .header {
            padding: 0;
            border-bottom: 1px solid darkgray;
            margin: 0 20px;
        }

        .header .col-lg-4 {
            padding: 0;
            text-align: center;
        }

        .header .logo {
            height: 100px;
            background-image: url("./img/logo.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .header .title {
            position: relative;
            background-image: -webkit-linear-gradient(top, #eee, skyblue);
            color: #348299;
            height: 90px;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
            overflow: hidden;
        }

        .header .title h3 {
            margin: 0;
            position: absolute;
            top: 20px;
            width: 100%;
            left: 0;
            text-align: center;
            display: inline-block;
            font-size: 50px;
            font-weight: bold;

        }

        .header .timeRight {

        }

        .header .time {
            position: relative;
            text-align: left;
            width: 300px;
            font-size: 25px;
            margin: 25px auto 0;
            background-color: #ccf3f0;
            padding: 5px;
            border: 1px solid #147e3a;
            border-radius: 10px;
            margin-bottom: 10px;
            color: #348299;
            font-weight: bold;

        }

        .header .time span {
            position: absolute;
            right: -107px;
            display: block;
            background-color: #07a09d;
            padding: 6px 5px;
            top: -1px;
            color: #f5f5f5;
            border-radius: 10px;
        }

        .header .title h1 {
            margin: 0;
            line-height: 100px;
        }

        .content {
            padding-top: 20px;
        }

        .content .latest {
            background-color: #147e3a;
            margin: 0 20px;
            border-radius: 10px;
        }

        .content .latest h3 {
            height: 30px;
            line-height: 30px;
            color: #fdffc0;
            margin: 15px 0 15px 40px;
            font-weight: bold;
            font-size:35px;
        }

        .content .latest h3 span {
            width:25px;
            height: 25px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 28px orangered inset;
            margin-right: 15px;
        }

        .content .latest h3 p#userInfo {
            display: inline;
        }

        .content .room {
            margin: 0 20px 0;

        }

        .content .room .h-title {
            margin-top: 10px;
            margin-bottom: 10px;
            border: 5px solid #8ed0db;
        }

        .roomName .wait {
            width: 100px;
            margin-right: 10px;
        }

        .roomName .wait h3 {
            margin: 0;
            width: 100px;
            box-sizing: border-box;
            background-image: -webkit-linear-gradient(top, #eee, skyblue);
            color: #348299;
            font-size: 30px;
            border-radius: 10px;
        }
        .detailRoom{
            margin: 0 15px;
        }

        .infoList {
            border-radius: 10px;
            padding: 0;
            overflow: hidden;
            box-sizing: border-box;
            border: 5px solid #8ed0db;
            background-color: #8ed0db;
            margin-top: 10px;
            color: #000;
        }
        .infoList h3 {
            text-align: center;
            margin: 0;
        }
        .h-title {
            background-color: #8ed0db;
            border-radius: 10px;
            padding: 0;
        }
        .h-title div {
            padding: 0;
        }
        .h-title h3 {
            text-align: center;
            margin: 0;
            color: #000;
        }
        .footer {
            position: fixed;
            bottom: 10px;
            left: 35px;
            right: 35px;
            background-color: #147e3a;
            min-width: 670px !important;
            border-radius: 10px;
            height: 60px;
            overflow: hidden;
        }
        .footer-content {
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            white-space: nowrap;
            height: 60px;
            width: 100%;
        }
        .footer-content #GuoTitle{
            background-color: #147e3a;
            width: 220px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
        }
        .footer-content #showGuo{
            position: absolute;
            left: 220px;
            top: 0;
            height: 60px;
            line-height: 60px;
            font-size: 35px;
            white-space: nowrap;
            margin: 0;
            color: #fdffc0;
            font-weight: bold;
        }

        .footer-content h3 {
            height: 60px;
            line-height: 60px;
            color: #fdffc0;
            margin: 0;
            font-size:35px;
        }
        .footer-content h3 span {
            width: 25px;
            height: 25px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 50px orangered inset;
            margin-left: 23px;
            margin-right: 15px;
        }
        #disconnect{
            display:none;
            position:fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index:9999;
            background-color: rgba(0,0,0,.5);

        }
        #disconnect h3{
            position:absolute;
            width: 300px;
            height: 150px;
            line-height: 150px;
            color:red;
            background-color: #f5f5f5;
            border-radius:10px;
            text-align:center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin:auto;
        }
    </style>
</head>
<body>
<div id="disconnect">
    <h3>网络异常 ......</h3>
</div>
<div class="wrap">
    <div class="container-fluid header">
        <div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
            <div class="logo">
            </div>
        </div>
        <div class="col-lg-4  col-md-4 col-sm-4 col-xs-4 title">
            <h3 id="checkRoom"></h3>
        </div>
        <div class="col-lg-4  col-md-4 col-sm-4 col-xs-4  timeRight">
            <div class="time" id="year">

            </div>
        </div>
    </div>
    <div class="container-fluid content">
        <div class="row latest">
            <h3><span></span>当前呼叫: <p id="userInfo"></p></h3>
        </div>
        <div class="row room">
            <div class="col-lg-12 h-title">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>排队号</h3></div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>姓名</h3></div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>等待人数</h3></div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h3>检查状态</h3></div>
            </div>
            <ul class="detailRoom">
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
                <li class="row infoList">
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                    <h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'></h3>
                </li>
            </ul>
        </div>
    </div>
    <div class="container-fluid footer">
        <div class="footer-content footer-content1">
            <h3><span></span>请其他患者在大厅候诊区耐心等待</h3>
        </div>
        <div class="footer-content footer-content2" style="display: none">
            <h3 id="GuoTitle"><span></span>当前过号:</h3><p id="showGuo"></p>
        </div>
    </div>
</div>
<script>
    //底部显示的定时器的开关
    var bottomTimer = null;
    //处理呼号的顺序
    var indexCall;
    //处理底部显示的顺序
    var bottomIndex = 0;
    //过号存储数据
    var guoArr = [];
    //已经呼号存储数据
    var callArr = [];
    //显示数据的容器
    var showData = [];
    //单个科室的全部数据
    var dataAll = [];
    //呼号患者队列id
    var queueID = 'sadsadasdasdas';


    //显示数据的起始位置
    var index = 0;
    //显示的数据
    var arrShow = [];
    //定时器
    var timer = '';
    //设置显示科室名称(从客户端读取)
    var data = {
        clientName: "",
        checkRoomId: "",
        deptId: "",
        clientId: "",
        clientType: ""
    };

    //显示时间
    setInterval(function () {
        var time = new Date();
        var year = time.getFullYear();
        var month = parseInt(time.getMonth()) + 1;
        month = month < 10 ? '0' + month : month;
        var date = time.getDate();
        date = date < 10 ? '0' + date : date;
        var hour = time.getHours();
        hour = hour < 10 ? '0' + hour : hour;
        var second = time.getSeconds();
        second = second < 10 ? '0' + second : second;
        var minute = time.getMinutes();
        minute = minute < 10 ? '0' + minute : minute;
        var day = this.showDay(parseInt(time.getDay()));

        $("#year").html(year + '年' + month + '月' + date + '日' + ' ' + day);
        $("#year").html($("#year").html() + "<span>" + hour + ':' + minute + ':' + second + "</span>")

    }, 1000);

    function showDay(week) {
        if (week === 0) {
            return "星期天";
        } else if (week === 1) {
            return "星期一";
        } else if (week === 2) {
            return "星期二";
        } else if (week === 3) {
            return "星期三";
        } else if (week === 4) {
            return "星期四";
        } else if (week === 5) {
            return "星期五";
        } else if (week === 6) {
            return "星期六";
        }
    }


    SetCss();
    function SetCss() {
        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
        screenHeight = screenHeight - 370;
        // var contentHeight = (screenHeight) / 8;
        var contentHeight = (screenHeight) / 11;

        $(".infoList").css('height', contentHeight + "px");
        $(".room .h-title").css('height', contentHeight + "px");
        $(".room h3").css('height', contentHeight + "px").css("fontSize", contentHeight * .7 + "px").css("lineHeight", contentHeight-10 + "px");

    }

    //sockJs操作
    var stompClient;


    /**
     * 捕获异常
     */
    window.onerror = function () {
        alert(arguments[0]);
        // 阻止在控制台中打印错误信息
        return true;
    };

    /**
     * 读取配置信息
     */
    $(document).ready(function () {
        //定时执行，2秒后执行
        var t1 = window.setTimeout(refreshCount, 1000 * 3);

        function refreshCount() {
            // 获取配置文件信息
            getClientProperties();
            //去掉定时器
            window.clearTimeout(t1);
        }
    });

    function getClientProperties() {
        var properties = app.getClientProperties();
        // var properties = '{"clientType":"1","clientId":"86e28557-dbe7-46b4-bf5c-174c4b038a00","clientName":"放射科","deptId":"外科楼超声","checkRoomId":"彩超二室"}';
        var _properties = eval("(" + properties + ")");
        window.g_properties = _properties;

        data.clientName = _properties.clientName;
        data.checkRoomId = _properties.checkRoomId;
        data.deptId = _properties.deptId;

        $("#checkRoom").html(data.clientName || "");

        //读取缓存的数据
        getQueueData();

        initWebSocket();
    }

    function getQueueData() {
        $.ajax({
            //配置文件里面的id
            url: "/queue/cacheCheckRoom?deptId=" + data.deptId + "&checkRoomId=" + data.checkRoomId,
            type: "GET",
            success: function (result) {

                if(result.data.length>0){
                    for (var i = 0; i < result.data.length; i++) {
                        if (result.data[i].checkStatus === 0) {
                            showData.push(result.data[i]);
                        }
                        if (result.data[i].checkStatus === 1) {
                            guoArr.push(result.data[i]);
                        }
                        if(result.data[i].checkStatus === 2){
                            callArr.push(result.data[i])
                        }
                    }
                    SetAllData();
                    bottomShow();
                    showDataTal();
                }

            },
            error: function (result) {
                // console.log(result);
                alert(result)
            }
        });
    }

    function initWebSocket() {
        connection();
    }

    function connection() {
        // 建立连接对象
        var timer;
        // var socket = new SockJS('http://192.168.2.106:8080/zd-queuing-websocket');
        var socket = new SockJS('/zd-queuing-websocket');
        // 获取STOMP子协议的客户端对象
        var stompClient = Stomp.over(socket);
        // 定义客户端的认证信息,按需求配置
        var headers = {
            Authorization: ''
        };

        //http://192.168.2.106:8080/zd-queuing-websocket
        // 向服务器发起websocket连接
        stompClient.connect({},
            function () {
                $("#disconnect").hide();
                if (timer) {
                    clearInterval(timer);
                }
                stompClient.subscribe('/call/checkRoom/' + data.checkRoomId, function (msg) { // 订阅服务端提供的某个topic
                    //呼号就直接展示数据,不做任何操作
                    var personObj = JSON.parse(msg.body);

                    if(personObj.checkRoomId ===  data.checkRoomId){
                        //从检查完毕队列选择呼叫
                        callArr.forEach(function (item, index) {
                            if (item.queueId === personObj.queueId) {
                                // 语音播报
                                alert("呼叫-called" + item.patientName + item.queueId + personObj.checkRoom);
                                app.startVoice(item.patientName, item.queueId, personObj.checkRoom);
                            }

                        });
                        //从过号队列选择呼叫
                        guoArr.forEach(function (item, index) {
                            if (item.queueId === personObj.queueId) {
                                // 语音播报
                                alert("呼叫-over" + item.patientName + item.queueId + personObj.checkRoom);
                                app.startVoice(item.patientName, item.queueId, personObj.checkRoom);
                                for (var i = 0; i < showData.length; i++) {
                                    if (showData[i].queueId) {
                                        showData[i].checkStatus = 0;
                                    }
                                }
                            }
                        });
                        //正常操作
                        showData.forEach(function (item, index1) {
                            if (personObj.queueId === item.queueId) {
                                queueID = personObj.queueId;
                                index = Math.floor((index1 % showData.length)/10);
                                // 语音播报
                                alert("呼叫-show" + item.patientName + item.queueId + personObj.checkRoom);
                                app.startVoice(item.patientName, item.queueId, personObj.checkRoom);
                                for (var i = 0; i < showData.length; i++) {
                                    if (showData[i].queueId) {
                                        showData[i].checkStatus = 0;
                                    }
                                }
                                showData[index1].checkStatus = 4;
                                showDataTal();
                            }
                        });
                        $("#userInfo").html("("+personObj.queueId+")"+ personObj.patientName+" 到 "+personObj.checkRoom+"就诊");
                    }

                });
                stompClient.subscribe('/pass/checkRoom/' + data.checkRoomId, function (msg) { // 订阅服务端提供的某个topic
                    $("#userInfo").html('');
                    var queueId = msg.body;
                    showData.forEach(function (item, index) {
                        if (queueId === item.queueId) {
                            guoArr.push(item);
                            bottomShow();
                            showData.splice(index, 1);
                            //过号不显示当前检查的患者需要重新呼叫
                            SetAllData();
                            for (var i = index; i < showData.length; i++) {
                                if (showData[i].queueId) {
                                    showData[i].waitPatientNumber = showData[i].waitPatientNumber - 1;

                                }
                            }
                            //操作显示界面的函数
                            showDataTal();
                        }
                    });
                });
                stompClient.subscribe('/finish/checkRoom/' + data.checkRoomId, function (msg) { // 订阅服务端提供的某个topic
                    var queueId = msg.body;
                    //从过号队列里面选择的呼号完成就诊 删除过号队列对应的数据
                    guoArr.forEach(function (item, index) {
                        if (item.queueId === queueId) {
                            guoArr.splice(index, 1);

                            //设置该科室总数据
                            SetAllData();
                            //底部动画函数
                            bottomShow();

                            //往已呼队列插入数据
                            callArr.push(item);
                        }
                    });
                    showData.forEach(function (item, index) {
                        if (queueId === item.queueId) {
                            // guoArr.push(item);
                            showData.splice(index, 1);
                            for (var i = index; i < showData.length; i++) {
                                if (showData[i].queueId) {
                                    showData[i].waitPatientNumber = showData[i].waitPatientNumber - 1;
                                    //操作显示界面的函数
                                    showDataTal();
                                }
                            }
                            //往已呼队列插入数据
                            callArr.push(item);

                        }
                    });
                    $("#userInfo").html('');
                });
                stompClient.subscribe('/newPatient/checkRoom/' + data.checkRoomId, function (msg) {
                    var data = JSON.parse(msg.body);
                    if (showData.length === 0) {
                        showData = data;
                        var ceil = Math.ceil(showData.length / 10);
                        while (showData.length < ceil * 10) {
                            showData.push({
                                "queueId": "",
                                "patientName": "",
                                "patientSex": "",
                                "patientAge": "",
                                "inspectId": "",
                                "imageNumber": "",
                                "department": "",
                                "departmentId": "",
                                "checkRoom": "",
                                "checkId": "",
                                "checkRoomDisplayName": "",
                                "waitPatientNumber": "",
                                "className": "",
                                "cliisinpat": "",
                                "checkInTime": "",
                                "checkStatus": "",
                                "confirmTime": ""
                            })
                        }
                    }
                    else {
                        var ceil1 = Math.ceil(data.length / 10);
                        while (data.length < ceil1 * 10) {
                            data.push({
                                "queueId": "",
                                "patientName": "",
                                "patientSex": "",
                                "patientAge": "",
                                "inspectId": "",
                                "imageNumber": "",
                                "department": "",
                                "departmentId": "",
                                "checkRoom": "",
                                "checkId": "",
                                "checkRoomDisplayName": "",
                                "waitPatientNumber": "",
                                "className": "",
                                "cliisinpat": "",
                                "checkInTime": "",
                                "checkStatus": "",
                                "confirmTime": ""
                            })
                        }
                        var data1 = [];
                        showData.forEach(function (item) {
                            data1.push(item);
                        });
                        data.forEach(function (item) {
                            data1.push(item);
                        });
                        showData = data1;
                        SetAllData();
                    }
                    SetAllData();
                    showDataTal();
                });
                stompClient.subscribe('/zd-call/cleanCache',function () {
                    clearInterval(bottomTimer);
                    clearInterval(timer);
                    $('.footer-content h3').html("<h3><span></span>请其他患者在大厅候诊区耐心等待</h3>");
                    $("#userInfo").html('');
                    showData = [];
                    guoArr = [];
                    callArr = [];
                    showDataTal();
                })
            },
            function (err) {
                $("#disconnect").show();
                $('.footer-content h3').html("<h3><span></span>请其他患者在大厅候诊区耐心等待</h3>");
                $("#userInfo").html('');
                showDataTal();
                timer = setInterval(function () {
                    window.location.reload();
                }, 2000)
            });
    }   //连接 后台
    //底部内容显示函数
    bottomShow();
    function bottomShow() {
        var footerWidth = parseFloat($(".footer").css("width"));
        if(guoArr.length === 0){

            $(".footer-content1").css("display","block");
           $(".footer-content2").css("display","none");
            if(bottomTimer){
                clearInterval(bottomTimer)
            }
            return false;
        }
        else  {
            $(".footer-content2").css("display","block");
            $(".footer-content1").css("display","none");
            if(bottomTimer){
                clearInterval(bottomTimer)
            }
            var html ='';
            for(var i=0;i<guoArr.length;i++){
                html+="("+guoArr[i].queueId+")"+guoArr[i].patientName+"&nbsp;&nbsp;";
            }
            $("#showGuo").html(html);
            var widthH3 = parseFloat($("#showGuo").css("width"));

            if(widthH3>=footerWidth-220){
                bottomTimer = setInterval(bottomShow,10);
                $("#showGuo").css("left",parseFloat($("#showGuo").css("left"))-1);
                if(-parseFloat( $("#showGuo").css("left"))>parseFloat($('.footer-content').css("width"))-220){
                    $("#showGuo").css("left",parseFloat(footerWidth));
                }
            }
            else {
                $("#showGuo").css("left",220);
            }
        }
    }

    //数据显示操作函数
    function showDataTal() {
        var youzhi = [];
        var meizhi = [];
        showData.forEach(function (item) {
            if (!item.checkId) {
                meizhi.push(item)
            }
            else youzhi.push(item)
        });
        var data2 = [];
        youzhi.forEach(function (item) {
            data2.push(item);
        });
        showData = data2;
        clearInterval(timer);
        var ceil3 = Math.ceil(showData.length / 10) || 1;
        while (showData.length < ceil3 * 10) {
            showData.push({
                "queueId": "",
                "patientName": "",
                "patientSex": "",
                "patientAge": "",
                "inspectId": "",
                "imageNumber": "",
                "department": "",
                "departmentId": "",
                "checkRoom": "",
                "checkId": "",
                "checkRoomDisplayName": "",
                "waitPatientNumber": "",
                "className": "",
                "cliisinpat": "",
                "checkInTime": "",
                "checkStatus": "",
                "confirmTime": ""
            })
        }
        dataShow();
        function dataShow() {
            if(timer){
                clearInterval(timer)
            }
            //翻屏
            timer = setInterval(dataShow, 15000);
            var ceilAll = Math.ceil(showData.length / 10);
            if (index >= ceilAll) {
                index = 0;
            }
            arrShow = showData.slice(index * 10, index * 10 + 10);
            index++;
            $(".detailRoom").html('');
            for (var i = 0; i < arrShow.length; i++) {
                if(arrShow[i].queueId == queueID){
                    var li = "<li class='row infoList' style='border-color: orange;color: red'>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + arrShow[i].queueId + "</h3>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + arrShow[i].patientName + "</h3>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + arrShow[i].waitPatientNumber + "</h3>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + checkStatus(arrShow[i].checkStatus) + "</h3>" + "</li>";
                }
                else {
                    var li = "<li class='row infoList'>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + arrShow[i].queueId + "</h3>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + arrShow[i].patientName + "</h3>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + arrShow[i].waitPatientNumber + "</h3>" +
                        "<h3 class='col-lg-3 col-md-3 col-sm-3 col-xs-3 info'>" + checkStatus(arrShow[i].checkStatus) + "</h3>" + "</li>";
                }

                $(".detailRoom").append(li);

            }
            SetCss();
        }
    }

    function disconnect() {
        if (stompClient) {
            stompClient.disconnect();
        }
    } // 断开连接
    //检测状态变化 数字->中文
    function checkStatus(status) {
        if (status === 0) {
            return "等待检查"
        }
        else if (status === 1) {
            return "已过号"
        }
        else if (status === 2) {
            return "检查完毕"
        }
        else if (status === 4) {
            return "正在检查"
        }
        else return ""
    }

    //设置该科室的所有信息
    function SetAllData() {
        showData.forEach(function (item) {
            if (item.queueId) {
                dataAll.push(item)
            }

        });
        guoArr.forEach(function (item) {
            dataAll.push(item)
        });
        callArr.forEach(function (item) {
            dataAll.push(item)
        });
        //去重操作
        var result = [];
        var obj = {};
        for (var i = 0; i < dataAll.length; i++) {
            if (!obj[dataAll[i].queueId]) {
                result.push(dataAll[i]);
                obj[dataAll[i].queueId] = true;
            }
        }
        dataAll = result;


    }

    //正在检测函数
    function checkNow(status) {
        return "正在检查"
    }
</script>
</body>
</html>